<template>
  <div style="margin: 15px; margin-right: 30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入联系人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="phone">
            <el-input v-model="form.phone" autocomplete="off" placeholder="请输入联系人电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" autocomplete="new-password" placeholder="请输入密码，默认abcd1234" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="identificationNumber">
            <el-input v-model="form.identificationNumber" placeholder="请输入身份证号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="从业资格证" prop="workLicense">
            <el-input v-model="form.workLicense" placeholder="请输入从业资格证" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="从业资格证到期" prop="workLicenseDueDate">
            <el-date-picker
              v-model="form.workLicenseDueDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证类型" prop="vehicleClass">
            <el-select v-model="form.vehicleClass" placeholder="请选择驾驶证类型" clearable>
              <el-option
                v-for="item in parentData.vehicleTypeAllowList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
                clearable
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证号" prop="driverLicense">
            <el-input v-model="form.driverLicense" placeholder="请输入驾驶证号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证到期" prop="driverLicenseDueDate">
            <el-date-picker
              v-model="form.driverLicenseDueDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在区域" prop="areaList">
            <el-cascader
              v-model="form.areaList"
              :options="parentData.areaOptions"
              :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
              @change="changeAreaList"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="homeAddress">
            <el-input v-model="form.homeAddress" placeholder="请输入详细地址" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="道路运输许可证" prop="roadPermitNumber">
            <el-input v-model="form.roadPermitNumber" placeholder="请输入道路运输许可证" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传证件" required>
            <div class="custom-grid">
              <el-form-item prop="driverLicenseImg">
                <el-upload
                  v-model="form.driverLicenseImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('driverLicense', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.driverLicenseImg" :src="form.driverLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">驾驶证</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="driverImg">
                <el-upload
                  v-model="form.driverImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('driver', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.driverImg" :src="form.driverImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">司机照片</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="workLicenseImg">
                <el-upload
                  v-model="form.workLicenseImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('workLicense', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.workLicenseImg" :src="form.workLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">从业资格证</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <div class="custom-grid">
              <el-form-item prop="identificationImg">
                <el-upload
                  v-model="form.identificationImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('identification', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.identificationImg" :src="form.identificationImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证正面照</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="identificationBackImg">
                <el-upload
                  v-model="form.identificationBackImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('identificationBack', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.identificationBackImg"
                    :src="form.identificationBackImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证背面照</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getDriverTeam, updateDriverTeam } from "@/api/driver";
import { validatePhone, validateIDNumber } from "@/utils/validate.js";
export default {
  name: "TeamDriverEdit",
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          areaOptions: [],
          vehicleBindList: [],
          vehicleTypeAllowList: [],
          vehicleClassificationList: [],
          vehicleLengthList: [],
          vehicleWidthList: [],
          vehicleHighList: [],
          vehicleTonnageList: [],
          locationSourceList: []
        };
      }
    }
  },
  data() {
    return {
      uploadUrl: this.BASE_API_URL + "ntocc-tps-api/fileUpload",
      emptyForm: {},
      form: {
        teamCode: "",
        driverType: "2",
        name: "",
        phone: "",
        password: "",
        identificationNumber: "",
        workLicense: "",
        workLicenseDueDate: "",
        areaList: [],
        provinceCode: "",
        cityCode: "",
        countyCode: "",
        homeAddress: "",
        roadPermitNumber: "",
        vehicleClass: "",
        driverLicense: "",
        driverLicenseDueDate: "",
        workLicenseImg: "",
        driverLicenseImg: "",
        identificationImg: "",
        identificationBackImg: "",
        driverImg: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        phone: [
          {
            required: true,
            validator(rule, value, callback) {
              validatePhone(value)
                ? callback()
                : callback(new Error('请输入正确的电话号码'))
            },
            trigger: 'blur'
          }
        ],
        password: [{ required: false, message: '请输入密码', trigger: 'blur' }],
        identificationNumber: [
          {
            required: true,
            validator(rule, value, callback) {
              validateIDNumber(value)
                ? callback()
                : callback(new Error('请输入正确的身份证号'))
            },
            trigger: 'blur'
          }
        ],
        driverLicenseDueDate: [
          { required: true, message: '请选择驾驶证到期日期', trigger: 'blur' }
        ],
        workLicense: [
          { required: true, message: '请输入从业资格证', trigger: 'blur' }
        ],
        workLicenseDueDate: [
          { required: true, message: '请选择从业资格证到期', trigger: 'change' }
        ],
        roadPermitNumber: [
          { required: true, message: '请输入道路运输许可证', trigger: 'blur' }
        ],
        vehicleClass: [
          { required: true, message: '请选择准驾车型', trigger: 'change' }
        ],
        driverLicense: [
          { required: true, message: '请输入驾驶证号', trigger: 'blur' }
        ],
        areaList: [
          { required: true, message: '请选择所在区域', trigger: 'change' }
        ],
        homeAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        driverLicenseImg: [
          { required: true, message: '请上传驾驶证照片', trigger: 'blur' }
        ],
        driverImg: [
          { required: true, message: '请上传司机照片', trigger: 'blur' }
        ],
        workLicenseImg: [
          { required: true, message: '请上传从业资格证照片', trigger: 'blur' }
        ],
        identificationImg: [
          { required: true, message: '请上传身份证正面照', trigger: 'blur' }
        ],
        identificationBackImg: [
          { required: true, message: '请上传身份证背面照', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {},
  created() {
    this.form.teamCode = this.$route.query.partyCode;
    // 保存空表单对象
    this.emptyForm = JSON.parse(JSON.stringify(this.form));
  },
  methods: {
    getInfo(code) {
      this.form = this.emptyForm;
      getDriverTeam(code).then(response => {
        this.form = response.data;
        this.form.areaList = [
          response.data.provinceCode,
          response.data.cityCode,
          response.data.countyCode
        ];
      });
    },
    changeAreaList(value) {
      this.form.provinceCode = value[0];
      this.form.cityCode = value[1];
      this.form.countyCode = value[2];
    },
    handleUpdateImgSuccess(type, res, file) {
      switch (type) {
        case "driverLicense":
          this.form.driverLicenseImg = res.data;
          break;
        case "identification":
          this.form.identificationImg = res.data;
          break;
        case "identificationBack":
          this.form.identificationBackImg = res.data;
          break;
        case "driver":
          this.form.driverImg = res.data;
          break;
        case "workLicense":
          this.form.workLicenseImg = res.data;
          break;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/bmp" ||
        file.type === "image/png";
      const isLtnM = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,BMP,PNG 格式!");
      }
      if (!isLtnM) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLtnM;
    },
    funcSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          updateDriverTeam(this.form).then(response => {
            rLoading.close();
            this.$message({ message: response.msg, type: "success" });
            this.$emit("fatherEditMethod");
          });
        } else {
          this.$message.error("必选项不能为空!");
        }
      });
    },
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    }
  }
};
</script>
<style scoped>
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
.custom-grid {
  display: inline-block;
  font-size: 14px;
  color: #8c939d;
  margin-right: 20px;
}
.avatar-uploader /deep/.el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  box-sizing: border-box;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #c0ccda;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
